<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<html>

<head th:include="common/common::header">
<meta charset="UTF-8">
<style type="text/css">
#index {
	padding: 15px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	opacity: 0;
	font-size: 12px;
}

.index-l {
	padding: 10px;
	width: 48%;
	overflow: auto;
}
</style>
</head>

<body>
	<div id="index">
		<form id="sysresources_form" class="easyui-form" method="post" data-options="novalidate:true">
		<div class="contentWrapper">
			<!--tab-->
			<div class="index-l">
				<div id="tt" class="easyui-tabs" data-options="tabHeight:31"
					style="width: 100%;">
					<div title="基础配置" style="padding: 20px; display: none;">
						<div class="contentWrapper">
							<input type="hidden" id="sysResources_id" name="id" th:value="${sysResource.id }">
							<input type="hidden" id="sysResources_json" name="resourcesJson" th:value="${sysResource.id }">
							<div class="form-item">
								<label for="" class="label-top">资源名称：</label> <input
									id="sysResources_name" name="name" class="easyui-validatebox easyui-textbox"
									data-options="required:true" style="width: 90%;"
									th:value="${sysResource.name }">

							</div>
							<br>
							<div class="form-item">
								<label for="" class="label-top">资源地址：</label> <input id="sysResources_target"
									class="easyui-validatebox easyui-textbox" name="target"
									data-options="required:false" style="width: 90%;"
									th:value="${sysResource.target }">

							</div>
							<br>
							<div class="form-item">
								<label for="" class="label-top" style="width:8%;float: left;line-height: 30px">资源图标：</label>
								<div style="width: 90%;float: left;">
								<c:set var="icon_default" value="fa fa-sort-desc" ></c:set>
									<span id="icon_span" th:class="${sysResource.icon } == null ? ${icon_default} : ${sysResource.icon }" style="width: 3%; float: left;display:inline-block;line-height: 30px"></span> 
									<input id="icon_value" name="icon" class="easyui-validatebox easyui-textbox"
										data-options="required:true,height:30"
										style="width: 96%; float: left" th:value="${sysResource.icon }" readonly="readonly">
								</div>
								
								<div
									style="width: 90%;float:right; height: 60px; overflow: scroll; border: 1px #ccc solid; margin-right: 3%;">
									<ul class="liStyle">
											<li style="float: left; padding: 5px 5px" th:each="icon:${icons}"><a
												th:id="${icon }" onclick="icon_save(this.id)"><span
													th:class="${icon }"></span></a></li>
									</ul>
								</div>
								<br>
							</div>
							<br>
							<br>
							<div class="form-item" style="margin-top: 70px">
								<label for="" class="label-top">所属资源：</label> <input id="sysResources_pid"
									class="easyui-combotree" style="width: 90%; height: 30px;"
									th:value="${sysResource.pid }"
									data-options="editable:false,panelHeight:null" name="pid">
							</div>
							<br>
							<div class="form-item">
								<label for="" class="label-top">授权标识：</label> <input id="sysResources_title"
									class="easyui-validatebox easyui-textbox" name="title" prompt="多个标识符用逗号隔开,例如：user:list,user:save"
									data-options="required:true" style="width: 90%;"
									th:value="${sysResource.title }">

							</div>
							<br>
							<div class="form-item">
								<label for="" class="label-top">资源排序：</label> <input id="sysResources_sort"
									class="easyui-validatebox easyui-numberbox" name="sort"
									data-options="required:true" style="width: 90%;"
									th:value="${sysResource.sort }">

							</div>
							<br>
								<div class="form-item">
									<label for="" class="label-top">是否可用：</label> <input
										id="sysResources_enable" class="easyui-combobox"
										data-options="textField:'text',valueField:'id',editable:false,panelHeight:null,url:'/system/common/load_enabled.do'" name="enabled"
										style="width: 90%;" th:value="${sysResource.enabled }">
								</div>
							<br>
							<div class="form-item">
								<label for="" class="label-top">资源描述：</label> <input id="sysResources_author"
									class="easyui-validatebox easyui-textbox" name="author"
									data-options="required:false" style="width: 90%;" th:value="${sysResource.author }">

							</div>
						</div>
					</div>
					<div title="功能配置"
						style="overflow: auto; padding: 20px; display: none;">
							<table id="resources_grid" class="easyui-datagrid" title=""style="width: 100%; height: auto" th:attr="data-options='iconCls: \'icon-edit\',singleSelect: true,toolbar: \'#tb\',url:\'/system/resource/load_child?pid='+${sysResource.id}+'\',method: \'post\',onClickRow: onClickRow'">
							<thead>
								<tr>
									<th id="rname"
										data-options="field:'name',width:100,editor:{type:'textbox',options:{required:true}}">名称</th>
									<th id="rtarget"
										data-options="field:'target',width:200,editor:{type:'textbox',options:{required:true}}">地址</th>
									<th id="rtitle"
										data-options="field:'title',width:200,editor:{type:'textbox',options:{required:true}}">标识符</th>
									<th id="type"
										data-options="field:'type',width:100,formatter:function(value,row){return row.typename;},editor:{type:'combobox',options:{valueField:'value',textField:'text',method:'get',data:[{value:'res_button',text:'弹窗按钮'},{value:'res_ajax',text:'ajax请求'}],required:true}}">请求类型</th>
									<th id="renabled"
										data-options="field:'enabled',width:60,formatter:function(value,row){return row.enabledname;},editor:{type:'combobox',options:{valueField:'id',textField:'text',method:'get',url:'/system/common/load_enabled.do',required:true}}">是否可用</th>
									<th id="authorization"
										data-options="field:'authorization',width:60,formatter:function(value,row){return row.pwoername;},editor:{type:'combobox',options:{valueField:'id',textField:'text',method:'get',url:'/system/common/load_enabled.do',required:true}}">是否授权</th>
											</tr>
										</thead>
							</table>
							<div id="tb" style="height: auto">
									<a href="javascript:void(0)" class="easyui-linkbutton info" onclick="append()" id="btn">新增</a> 
									<a href="javascript:void(0)" class="easyui-linkbutton warning" data-options="plain:true" onclick="removeit()">删除</a>
							</div>
						</div>
					</div>
				</div>
			</div>
					<div style="margin-top: 1%; padding-left: 37.5%">
						<a href="javascript:void(0)" onclick="submitForm()" class="easyui-linkbutton"data-options="iconCls:'fa fa-floppy-o'"style="height: 30px; border-left-width: 1px;">保存</a> 
						<a id="sysresources_close" onclick="closedialog(this)"href="javascript:void(0)" class="easyui-linkbutton"data-options="iconCls:'fa fa-ban'"style="height: 30px; border-left-width: 1px;">取消</a>
					</div>
		</form>
	</div>
	
<script type="text/javascript">


function submitForm(){
	if (endEditing()){
 		$('#resources_grid').datagrid('acceptChanges');
	}
 	var row = $('#resources_grid').datagrid('getRows');
	$("#sysResources_json").val(JSON.stringify(row));
	$('#sysresources_form').form('submit',{
		url:'/system/resource/save.do',
		onSubmit:function(){
			return $(this).form('enableValidation').form('validate');
		},
		 success: function (data) {
			 if (JSON.parse(data).status ==200) {
				 	break_save();
				} else {
						$.messager.alert('消息',JSON.parse(data).msg);
				}
		 }
	});
}


var editIndex = undefined;
function endEditing() {
	if (editIndex == undefined) {
			return true
		}
	if ($('#resources_grid').datagrid('validateRow', editIndex)) {
		var ed = $('#resources_grid').datagrid('getEditor', {index : editIndex,field : 'enabled'});
		var productname = $(ed.target).combobox('getText');
		$('#resources_grid').datagrid('getRows')[editIndex]['enabledname'] = productname;
		var ed1 = $('#resources_grid').datagrid('getEditor', {index : editIndex,field : 'authorization'});
		var pwoername = $(ed1.target).combobox('getText');
		$('#resources_grid').datagrid('getRows')[editIndex]['pwoername'] = pwoername;
		var ed2 = $('#resources_grid').datagrid('getEditor', {index : editIndex,field : 'type'});
		var type = $(ed2.target).combobox('getText');
		$('#resources_grid').datagrid('getRows')[editIndex]['typename'] = type;
		$('#resources_grid').datagrid('endEdit',editIndex);editIndex = undefined;
		return true;
	} else {
		return false;
	}
}
function onClickRow(index) {
		if (editIndex != index) {
				if (endEditing()) {
						$('#resources_grid').datagrid('selectRow',index).datagrid('beginEdit',index);
						editIndex = index;
				} else {
						$('#resources_grid').datagrid('selectRow',editIndex);
						}
				}
			}
function append() {
		if (endEditing()) {
				$('#resources_grid').datagrid('appendRow', {enabled : 1,authorization : 1});
				editIndex = $('#resources_grid').datagrid('getRows').length - 1;
				$('#resources_grid').datagrid('selectRow', editIndex).datagrid('beginEdit',editIndex);
			}
		}
function removeit() {
		if (editIndex == undefined) {
			return
			}
			$('#resources_grid').datagrid('cancelEdit',editIndex).datagrid('deleteRow', editIndex);
			editIndex = undefined;
			}
function accept() {
			if (endEditing()) {
				$('#resources_grid').datagrid('acceptChanges');
				}
		}
function reject() {
		$('#resources_grid').datagrid('rejectChanges');
		editIndex = undefined;
		}
function getChanges() {
		var rows = $('#resources_grid').datagrid('getChanges');
			alert(rows.length+ ' rows are changed!');
	}

function icon_save(id) {
		$("#icon_value").textbox('setValue',id)
		$("#icon_span").attr("class",id); 
	}

$(function () {
	var parentId = '[[${sysResource.pid}]]';
	var reid = '[[${sysResource.id}]]';
	
	$('#sysResources_pid').combotree({    
	    url: '/system/resource/load_tree.do',    
	    required: false ,
	    onLoadSuccess: function (node, data) {
	    	if(parentId != null && parentId !='' && parentId != 0) {
	    	var t = $("#sysResources_pid").combotree('tree');//获取tree  
	            node= t.tree("find",parentId);  
	    		console.log(node)
	            t.tree('select', node.target);
	    	}
		}
	});
})
</script>
</body>
</html>